<template>
	<view class="container">
		<view class="givingList">
			<view class="phoneNumber">
				<input placeholder="请输入手机号" type="number" maxlength="11" v-model="phoneNumber" placeholder-style="color: rgba(171,173,173,0.8);" />
			</view>
			<view class="radio">
				<radio class="uni-radio" style="transform:scale(0.7);" checked="1" color="#F7FF16" />
				<text>已阅读并同意 【用户协议】</text>
			</view>
			<view class="btn" @click="download">立即加入</view>
		</view>
	</view>
</template>

<script>
	import Api from '@/common/api';

	export default {
		data() {
			return {
				qrCodeImg: '',
				haibaoImg: '',
				phoneNumber: '',
				invite: '',
			};
		},
		onLoad(opsions) {
			// setTimeout(function() {
			// 	uni.showToast({
			// 		title: JSON.stringify(opsions),
			// 		icon: "none"
			// 	});
			// }, 1000)
			document.title = '牧耘郎';
			this.invite = opsions.invite
			// this.loadData();
		},
		methods: {
			async download() {
				var params = {
					"invite_code": this.invite,
					"mobile": this.phoneNumber
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				let data = await Api.apiCall('post', Api.agent.get_invite_code, params)
				if (data) {
					// uni.showToast({
					// 	title: '红包已到账，请下载牧耘郎APP领取',
					// 	icon: "none"
					// });
					location.href = 'http://download.dfkjt.com/html/download.html'
				}
			},
		},

	}
</script>

<style lang="scss">
	$baseUrl: 'http://image.dfkjt.com/img/app/';
	page {
		// background-color: #ffc99e;
		width: 100vw;
		height: 100vh;
		background-image: url($baseUrl + 'friendInvitate_bg.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
		overflow: hidden;
	}

	.container {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-flow: column wrap;
		justify-content: flex-end;
		align-items: center;

		.givingList {
			width: 657upx;
			height: 939upx;
			background-image: url($baseUrl + 'friendInvitate_givingList.png');
			background-repeat: no-repeat;
			background-size: 100% auto;
			display: flex;
			flex-flow: column wrap;
			align-items: center;
			justify-content: flex-end;
			position: relative;

			.phoneNumber {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 415upx;
				height: 78upx;
				border: 1upx solid #BEBEBE;
				border-radius: 39upx;
				box-sizing: border-box;
				background-color: #FFF;
				padding: 0 20upx;

				input {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					text-align: center;
					color: rgba($color: #ABADAD, $alpha: 0.8);
					font-weight: 200;
				}
			}

			.radio {
				margin-top: 90upx;
				font-size: 26upx;
				color: #F7FF16;
				align-items: center;
				text {
					font-size: 24upx;
					color: #F7FF16;
				}
			}
			.btn{
				width: 532upx;
				height: 88upx;
				border-radius: 44upx;
				margin-bottom: 32upx;
				font-size: 32upx;
				background-color: #F7FF16;
				color: #FB5E44;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>
